<script setup>
import Mask from "../UI/mask.vue";
import hamburgerList from "../goods/hamburgerList.vue";
import Dialog from "../UI/dialog.vue";
import { useHamburgerStore } from "@/store/hamburger";
import { ref } from "vue";

const hamburgerStore = useHamburgerStore();
const showDialog = ref(false);
const emits = defineEmits();

const okHandler = () => {
  /* 
  1、清空购物车
  (2、关闭对话框 dialog 放在组件里)
  3、关闭cartDetails
  */
  hamburgerStore.clearCart();
  emits("hide");
};
</script>
<template>
  <Mask style="z-index: 99">
    <Dialog
      @ok="okHandler"
      :is-show="showDialog"
      @hide="showDialog = false"
      msg="确认删除所有商品？"
    ></Dialog>

    <div class="cart-details">
      <div class="header">
        <h2 class="desc">餐品详情</h2>
        <a @click="showDialog = true" href="javascript:;">
          <i class="ri-delete-bin-line"></i>
          清空购物车
        </a>
      </div>
      <hamburgerList
        :desc="false"
        :hamburger-messages="hamburgerStore.cartGoods"
      />
    </div>
  </Mask>
</template>

<style scoped>
.cart-details {
  position: absolute;
  bottom: 0;
  width: 750rem;
  overflow: auto;
  background-color: #fff;
  border-top-left-radius: 40rem;
  border-top-right-radius: 40rem;
}
.meals {
  height: auto;
  max-height: calc(280rem * 4);
}
.header {
  display: flex;
  justify-content: space-between;
  padding: 20rem 40rem;
}
.header a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #9f9f9f;
  font-size: 24rem;
}
.header i {
  font-size: 30rem;
  margin-right: 10rem;
}
.desc {
  font-size: 27rem;
}
</style>
